<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>查找运输工具</title>
    <link rel="stylesheet" href="../../static/layui/css/layui.css">
    <link rel="stylesheet" href="../../static/css/main.css">
    <link rel="stylesheet" href="../../static/css/public.css">
    <script src="../../static/js/jquery-3.4.1.min.js"></script>
    <script src="../../static/layui/layui.js"></script>
    <style>
        .t{
            width: 100px
        }
    </style>
</head>
<body>

    <div class="body">
        <h2 class="tablename">条件查找运输工具</h2>
        <hr class="layui-bg-gray">
        <div class="form">
            <br>
            <div class="form">
                <br>
                <form class="layui-form">

                    <div class="layui-form-item">
                        <label class="layui-form-label t">运输工具编号:</label>
                        <div class="layui-input-inline">
                            <input type="text" id="vehicleId" value="" autocomplete="off" lay-verify=""
                                   class="layui-input" >
                        </div>

                        <label class="layui-form-label t">车牌号码:</label>
                        <div class="layui-input-inline">
                            <input type="text" id="licensePlateNumber" value="" autocomplete="off" lay-verify=""
                                   class="layui-input">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label t">运输工具类型:</label>
                            <div class="layui-input-inline">
                                <input type="text" id="vehicleType" value="" lay-verify=""
                                       class="layui-input">
                            </div>
                        </div>


                        <div class="layui-inline">
                            <label class="layui-form-label t">运输工具容量:</label>
                            <div class="layui-input-inline">
                                <input type="text" id="capacity" value="" lay-verify=""
                                       class="layui-input">
                            </div>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label t">运输工具状态:</label>
                            <div class="layui-input-inline">
                                <input type="text" id="vehicleStatus" value="" lay-verify=""
                                       autocomplete="off" class="layui-input">
                            </div>
                        </div>

                    </div>
                    <br>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            &nbsp;&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp;
                            <!--                    <input class="layui-btn layui-btn-radius layui-btn-normal" type="button" onclick="sub()" value="提交">-->
                            <button class="layui-btn layui-btn-radius layui-btn-normal" lay-submit lay-filter="*">查询</button>
                            &nbsp;&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp;
                            <button type="reset" class="layui-btn layui-btn-radius  layui-btn-danger">重置</button>
                        </div>
                    </div>
                    <br>
                </form>


            </div>



        </div>
    </div>
<script>

    layui.use('element', function(){
        var element = layui.element;

        //…
    });

    layui.use(['form', 'layedit', 'laydate'], function(){
        var form = layui.form
            ,layer = layui.layer
            ,layedit = layui.layedit
            ,laydate = layui.laydate;

        form.on('submit(*)', function(){
            var vehiclesubmit = {
                "vehicleId" : document.getElementById('vehicleId').value,
                "licensePlateNumber" : document.getElementById('licensePlateNumber').value,
                "vehicleType" : document.getElementById('vehicleType').value,
                "vehicleStatus" : document.getElementById('vehicleStatus').value,
                "capacity" : document.getElementById('capacity').value,
            }
            layer.confirm('确定查询吗？', {
                btn: ['是的','取消'] //按钮
            }, function(){
                $.ajax({
                    url: 'http://localhost:8080/vehicle/search',
                    type: 'POST',
                    contentType : 'application/json',
                    dataType: 'json',
                    data: JSON.stringify(vehiclesubmit),
                    success(res){
                        var obj = JSON.stringify(res);
                        console.log(obj)
                        console.log(res)
                        if(Object.keys(obj)[0] == 0){
                            localStorage.setItem('searchvehicle', obj);
                            var url = '../../pages/vehicle/allsearchvehicle.html'
                            $(window).attr('location', url);
                            // layer.msg("查询成功", {icon: '1', time: 2000});

                        }
                        else layer.msg("查询失败", {icon: '2', time: 2000});
                    },
                    error(){
                        layer.msg('500！', {
                            time: 1000, //不自动关闭
                            icon: 'layui-icon-ok',
                        });
                    }
                })
            }, function(){
                layer.msg('已取消', {
                    time: 2000
                });
            });

            return false;
        })


    });
</script>


</body>
</html>